<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="/static/css/login.css">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/assets/apple-icon-180x180.png">
    <link href="/static/assets/favicon.ico" rel="icon">
    <title>login page</title>
    <link href="/static/css/main.3f6952e4.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/main.70a66962.js"></script>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/build/tracking-min.js"></script>
    <script type="text/javascript" src="/static/build/data/face-min.js"></script>
    <style>
  video, canvas {
    margin-left: 10px;
    margin-top: 40px;
    position: absolute;
  }
   </style>
<head/>
<body class="minimal">
<div id="site-border-left"></div>
<div id="site-border-right"></div>
<div id="site-border-top"></div>
<div id="site-border-bottom"></div>
<!-- Add your content of header-->
<header>
    <nav class="navbar  navbar-fixed-top navbar-default">
        <div class="container">
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav ">
                    <li><a href="{% url 'facerecognition:index' %}">01 : 首页</a></li>
                    <li><a href="{% url 'facerecognition:face_recognition'%}">02 : 人脸模糊</a></li>
                    <li><a href="{% url 'facerecognition:about' %}">03 : 关于本站</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if request.session.is_login %}
                    <li><a>你好,{{ request.session.user_name }}</a></li>
                    <li><a href="{% url 'users:logout' %}">登出</a></li>
                    {% else %}
                    <li><a href="{% url 'users:login' %}">登录</a></li>
                    <li><a href="{%  url 'users:register' %}">注册</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
</header>

<!-- /container -->
<div class="section-container">
    <div class="container">
        <div class="row-input-top">
            <div class="col-xs-12">
                <div class="section-container-spacer text-center">
                    <h1 class="h2">人脸录入</h1>
                </div>
                <div class="demo-container">
                    <video id="video" width="320" height="240" autoplay></video>
                    <canvas id="canvas" width="320" height="240"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
     var video = document.getElementById('video');
     var canvas = document.getElementById('canvas');
     var context = canvas.getContext('2d');

    function postFace() {
        setTimeout(function () {
            context.drawImage(video,0,0,320,240);
            img=canvas.toDataURL('image/jpg')
            {#获取完整的base64编码#}
            img=img.split(',')[1]
            //将照片以base64用ajax传到后台
            $.ajax({
		        type:"POST",
                url:'face_entry_getface/',
                //必须添加 csrf_token
                beforeSend:function (xhr,setting) {
                    xhr.setRequestHeader("X-CSRFToken","{{ csrf_token }}");
                },
                data:{
                    message:img
                },
                success:function (callback) {
                    if(callback=='no'){
                        postFace()
                        alert('录入成功');
                        window.location.href="../login"
                    }else {
                        window.location.href="../login"
                    }
                },
                error:function (callback) {
                    postFace()
                }
            })
        },300)
    }

      var tracker = new tracking.ObjectTracker('face');
      tracker.setInitialScale(4);
      tracker.setStepSize(2);
      tracker.setEdgesDensity(0.1);

      tracking.track('#video', tracker, { camera: true });
      tracker.on('track', function(event) {
      context.clearRect(0, 0, canvas.width, canvas.height);

        event.data.forEach(function(rect) {
          //将获取图片放在此处
          postFace();
          context.strokeStyle = '#a64ceb';
          context.strokeRect(rect.x, rect.y, rect.width, rect.height);
          context.font = '11px Helvetica';
          context.fillStyle = "#fff";
          context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
          context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
        });
      });
</script>
</body>
</html>